<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
     canvas三要素
     id:唯一标识
     width:画布内容宽度的像素大小
     height:画布内容高度的像素大小
   -->
    <canvas id="canvas1" width="800" height="600">
      这里的内容画布是不显示的
    </canvas>
    <video
      width="300"
      height="300"
      src="../1.2、福州大学晋江校区宣传视频(2020) 8.6.mp4"
      controls="controls"
    ></video>
  </body>
  <script>
    //1.找到画布对象和视频对象
    var video = document.querySelector("video");
    var canvas1 = document.querySelector("#canvas1");
    //2.找到上下文对象(画笔对象)这边是2d引擎的
    var ctx = canvas1.getContext("2d");
    //3.绘制视频
    var interId;
    video.onplay = function () {
      interId = setInterval(() => {
        ctx.clearRect(0, 0, 800, 600);
        ctx.fillRect(0, 0, 800, 600);
        ctx.drawImage(video, 0, 0, 800, 800);
        ctx.font = "20px 微软雅黑";
        ctx.strokeStyle = "#999";
        ctx.strokeText("你好你好",50,50);
      }, 16);
    };
    video.onpause = function () {
      clearInterval(interId);
    };
  </script>
</html>
